<template>
  <div>
    <div class="top">
      <div class="userInfo">
        <img :src="userInfo.avatarUrl" alt="">
      </div>
      <div class="name">
        <label>{{userInfo.nickName}}</label>
        <p>{{quote}}</p>
      </div>
    </div>

    <div class="contain">
      <div class="row" @click="showInstruction">
        <label class="left">
          <img class="img" src="/static/images/homework.png" alt="">
        </label>
        <label class="name">&nbsp;&nbsp;操作指引</label>
        <label class="right">></label>
      </div>

      <div class="row">
        <label class="left">
          <img class="img" src="/static/images/homework.png" alt="">
        </label>
        <label class="name">&nbsp;&nbsp;小程序开发课程</label>
        <label class="right">></label>
      </div>

      <div class="row">
        <label class="left">
          <img class="img" src="/static/images/delete.png" alt="">
        </label>
        <label class="name">&nbsp;&nbsp;清空记录</label>
        <label class="right">></label>
      </div>

      <div class="row" @click="showOpinion">
        <label class="left">
          <img class="img" src="/static/images/approval.png" alt="">
        </label>
        <label class="name">&nbsp;&nbsp;意见反馈</label>
        <label class="right">></label>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      userInfo: {},
      quote: ''
    }
  },
  mounted () {
    const userInfoStorage = wx.getStorageSync('userInfo')
    if (userInfoStorage.openId) {
      this.userInfo = userInfoStorage
      console.log('获取缓存用户数据', this.userInfo)
    }
  },
  methods: {
    rankArray () {
      let ranNum = Math.floor(((Math.random() + '') * 10))
      const quotes = [
        '积土成山，风雨兴焉；',
        '故不积跬步，无以至千里；',
        '驽马十驾，功在不舍。',
        '上食埃土，下饮黄泉，用心一也。',
        '是故无冥冥之志者，无昭昭之明；',
        '物类之起，必有所始。',
        '肉腐出虫，鱼枯生蠹。',
        '强自取柱，柔自取束。',
        '施薪若一，火就燥也.',
        '草木畴生，禽兽群焉，物各从其类也。'
      ]
      this.quote = quotes[ranNum]
    },
    showOpinion () {
      wx.navigateTo({
        url: '/pages/opinion/main'
      })
    },
    // 跳转到操作指引页面
    showInstruction () {
      // wx.navigateTo是小程序现成的API，保留当前页面，跳转到应用内的某个页面
      wx.navigateTo({
        url: '/pages/instruction/main'
      })
    }
  },
  onShow () {
    this.rankArray()
  }
}
</script>

<style scoped lang="scss">
.contain{
  margin-top: 10px;
  background:#FFFFFF;
  font-size:15px;
  .row{
    padding: 0px 18px;
    border-bottom: 1px #E8E8E8 solid;
    height: 55px;
    line-height: 55px;
    .img {
      float:left;
      width: 20px;
      height: 20px;
      padding-top:16px;
    }
    .name {
      float:left;
    }
  }
  .right {
    float: right;
    color: #C8C8C8;
    line-height:55px;
  }
  .left {
    width:80%;
  }
}  

.top{
  height: 80px;
  width: 100%;
  background:#EA5149;
  padding-top: 30px;
  display: flex;
  justify-content: flex-start;
  .userInfo{
    padding-bottom: 5px;
    img{
      width: 120rpx;
      height:120rpx;
      margin: 10rpx;
      border-radius: 1px;
      border: 1px #D0D0D0 solid;
    }
  }
  .name{
    padding-top: 30px;
    padding-left: 5px;
    color: #FFFFFF;
    font-size: 16px;
    .underline{
      border: 1px solid #ffffff;
      border-radius:5px;
      text-align:center;
    }
    .notice{
      color: #D8D8D8;
      font-size: 12px;
    }
    .a-line{
      background:#EA5149;
      border: none;
      display: inline;
      font-size: 16px;
      color: #FFFFFF;
      text-decoration:underline;
    }
  }
}
</style>

